import React, {Component} from 'react';
import { connect } from 'react-redux'
import Link  from 'next/link';
import { Dropdown,Icon,Popover } from 'antd';
import Nav from '../nav/';
import MyHead from '../head/';
import {logout} from '../../store/user/action'
import './index.less';

function mapStateToProps (state) {
    let {avatar,username,userId} = state.user;
    return {
       avatar,
       username,
       userId
    }
}
function mapDispatchToProps(dispatch) {
    return {
        logout: () => {dispatch(logout())},
    }
}
@connect(mapStateToProps,mapDispatchToProps)
export default class headerTop extends Component {
	constructor(props) {
        super(props);
        this.state = {
			showMenu:false,
        }
    }
	logout=()=>{
        this.props.logout()
        
	}
	toggleUserMenu (e){
		let showMenu = this.state.showMenu;
		this.setState({
			showMenu:!showMenu
		})
		e.nativeEvent.stopImmediatePropagation ? e.nativeEvent.stopImmediatePropagation() : e.nativeEvent.cancelBubble = true;
    }
    componentDidMount(){
        window.document.addEventListener('click',(e)=>{
            this.setState({
                showMenu:false
            })
        })
    }
	render() {
        let {username,avatar,userId} =  this.props;
        const DropdownMenu = (
            <div className='UserDropdownMenu'>
                <Link as={`/u/${userId}/`} href={`/personal?userId=${userId}&tab=`}>
                    <a className="menu-item">
                        <Icon type="user" /> 主页
                    </a>
                </Link>
                <Link href={`/settings`}>
                    <a className="menu-item">
                        <Icon type="setting" /> 设置
                    </a>
                </Link>
                <a className="menu-item" onClick={this.logout}><Icon type="logout" /> 退出</a>
            </div>
        )
		return(
			<div>
				<MyHead />
				<header className="AppHeader fixed">
					<div className="container">
						<Link href="/" >
							<img className="AppLogo" alt=""/>
						</Link>
						<Nav />
						<div className="AppHeader-right">
							{
								username ? (
                                    <div className="AppHeader-userInfo">
                                        <div className="user" onClick={this.toggleUserMenu.bind(this)}>
                                            <Popover placement="bottom"  content={DropdownMenu} trigger="click">
                                                <div className="dropdown">
                                                    <span className="avatar">
                                                        <img src={avatar} alt={username} />
                                                    </span>	
                                                </div>
                                            </Popover>
                                        </div>
                                        <Link  href="/write">
                                            <a target="_blank" className="btn write_btn">写文章</a>
                                        </Link>	
                                    </div>
								) : (
									<div className="userNoLogin">
										<Link href="/login">
											<a className="btn log_in" >登录</a>
										</Link>	
										<Link href="/regist">
											<a className="btn sign_up" >注册</a>
										</Link>		
									</div>	
								)
							}	
						</div>
					</div>	
				</header>
			</div>
		);
	}
}

